<template>
  <el-row>
    <el-col :span="14">
      <!-- 路由导航 -->
      <el-tabs v-model="activeName" class="tables" @tab-click="handleClick">
        <el-tab-pane name="index" label="首页">
          <template #label>
            <span class="custom-tabs-label">
              <span class="label">首页</span>
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="cart">
          <template #label>
            <span class="custom-tabs-label">
              <span class="label">购物车</span>
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="indent">
          <template #label>
            <span class="custom-tabs-label">
              <span class="label">我的订单</span>
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="user">
          <template #label>
            <span class="custom-tabs-label">
              <span class="label">个人中心</span>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="10">
      <div class="search">
        <el-input v-model="searchValue" clearable size="large" style="width:200px;margin-right:20px;" placeholder="请输入计算机名称"/>
        <el-button class="btn" @click="clickSearch" type="primary">搜索</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from "vue-router";

const activeName = ref('index');
const searchValue = ref('');
const router = useRouter();

const handleClick = (tab) => {
  router.push(`/${tab.paneName}`)
}

// 点击搜索
const clickSearch = async() => {
  router.push({
    path: 'index',
    query: {
      search: searchValue.value
    }
  })
}
</script>

<style scoped>
.tables {
  width: 420px;
}

.label {
  font-size: 20px;
}

.input {
  width: 230px;
  margin-right: 20px;
}

.btn {
  height: 40px;
  width: 80px;
}

.search {
  margin-left: 20px;
}
</style>